<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>选课信息</el-breadcrumb-item>
      <el-breadcrumb-item><b>同学名单</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <!-- 数据表格 -->
  <div style="margin:40px 20px 20px 20px; overflow-y: auto; height: 500px;"> <!-- 添加滚动样式 -->
    <el-table :data="tableCourse" stripe border style="width: 100%">
      <el-table-column prop="sid" label="学号" align="center" />
      <el-table-column prop="sname" label="姓名" align="center" />
      <el-table-column prop="gender" label="性别" align="center" />
      <el-table-column prop="deptname" label="学院" align="center" />
    </el-table>
  </div>

  <div>
    <div v-if="isConnected">
      <!--      <p>WebSocket 已连接。</p>-->
      <!-- 消息显示区域 -->
      <div id="messageArea" style="overflow-y: auto; height: 200px;"> <!-- 添加滚动样式 -->
        <div v-for="message in messages" :key="message.cid">
          <p>{{ message.content }}</p>
        </div>
      </div>
    </div>
    <div v-else>
      <button @click="initWebSocket">连接 WebSocket</button>
    </div>
  </div>

</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import request from "@/utils/class";
import { ElNotification } from 'element-plus';

const messages = ref([]);
const isConnected = ref(false);
let websocket = null;

const initWebSocket = () => {
  const socketUrl = 'ws://127.0.0.1:8086/ws/cid';
  websocket = new WebSocket(socketUrl);

  websocket.onopen = () => {
    isConnected.value = true;
    console.log('WebSocket 连接成功');
  };

  websocket.onmessage = (event) => {
    const message = JSON.parse(event.data);
    messages.value.push(message);
    console.log(message)
    showNotification(message); // 显示通知
  };

  websocket.onerror = (error) => {
    console.error('WebSocket 出现错误:', error);
  };

  websocket.onclose = () => {
    isConnected.value = false;
    console.log('WebSocket 连接已关闭');
  };
};

const showNotification = (message) => {
  ElNotification({
    title: '签到提醒',
    message: `老师发起了五分钟签到，请注意签到时间！`,
    type: 'uccess',
    duration: 0,
    dangerouslyUseHTMLString: true,
  });
};

onMounted(() => {
  initWebSocket();
});

////////////////表格///////////////////////
onMounted(() => {
  getCourse();
})

// 表格信息显示
const tableCourse = ref([])
const getCourse = () => {
  // 获取 cid
  const selectedCid = sessionStorage.getItem('selectedCid');

  request({
    url: '/select/classmates',
    method: 'get',
    params: {
      cid: selectedCid
    }
  }).then(req => {
    console.log(req)
    console.log(req.data)
    if (200 == req.data.errorCode) {
      tableCourse.value = req.data.data;
    }
  })
}
</script>

<style scoped>
/* 面包屑样式 */
.el-breadcrumb {
  font-size: 18px; /* 调整字体大小 */
  margin-top: 20px;
  margin-bottom: 50px;
  margin-left: 20px;
}

.el-table {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 现代字体 */
  color: #333; /* 字体颜色 */
  border-top: 1px solid #e8e8e8; /* 表格顶部边框 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.el-table th,
.el-table td {
  padding: 10px; /* 单元格内边距 */
  border-bottom: 1px solid #e8e8e8; /* 行间边框 */
}

/* 表格美化样式 */
.el-table th {
  text-align: center; /* 表头内容居中 */
  background-color: #eef1f6; /* 调整表头背景色 */
  font-weight: bold; /* 表头字体加粗 */
}

/* 自定义滚动条样式 */
div[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background-color: #888; /* 滚动条滑块颜色 */
  border-radius: 3px; /* 滑块圆角 */
}

div[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 滚动条轨道颜色 */
}
</style>